<template>
    <div>
        <home-header></home-header>
        <div class="cart-content">
            <div class="content">
                <div class="A"></div>
                <div class="shopBread">
                    <el-breadcrumb separator-class="el-icon-arrow-right">
                        <el-breadcrumb-item :to="{ path:'/home'}">首页</el-breadcrumb-item>
                        <el-breadcrumb-item>购物车</el-breadcrumb-item>
                    </el-breadcrumb>
                </div>
                <!-- 购物车 -->
                <div class="cart">
                    <ul class="cartList">
                        <li class="cartHeader">
                            <div class="checkH" style="width:100px"><el-checkbox @change="Selecteds(select)" v-model="select">全选</el-checkbox></div>
                            <div style="width:380px">商品信息</div>
                            <div style="width:200px">单价</div>
                            <div style="width:160px">数量</div>
                            <div style="width:160px">小计</div>
                            <div style="width:120px">操作</div>
                        </li>
                        <li>
                            <div v-if="listData==null" class="boxsss">
                                <el-empty description="描述文字"></el-empty>    
                            </div>
                            <div v-else>
                                <div class="cartContent" v-for="item in listData" :key="item.id"  @click="toDetail(item.id)">
                                    <div class="checkH" style="width:100px"><el-checkbox @change="Selected(item,item.selected,item.count)" v-model="item.selected"/></div>
                                    <div style="width:380px" class="boxImg">
                                        <img :src="item.picture" alt="">
                                        <div class="boxPXuan">
                                            <p class="names">{{item.name}}</p>
                                            <el-popover
                                                placement="bottom"
                                                width="354"
                                                trigger="click">
                                                <div class="amendBox" v-for="(xiao,ind) in amend " :key="ind">
                                                    <div class="amendP" >{{xiao.name}}</div>
                                                    <div class="sam">
                                                        <div class="amendbox" @click="imgs(xiaos,mend)" ref="mend" v-for="(xiaos,inds) in xiao.values" :key="inds">
                                                            <img v-show="xiaos.picture!=null" class="amendImg" :src="xiaos.picture" alt="">
                                                            <div v-show="xiaos.picture==null">{{xiaos.name}}</div>
                                                        </div>    
                                                    </div>
                                                    
                                                </div>
                                                <el-button @click="Mark">确定</el-button>
                                                <el-button slot="reference" @click="Gain(item.id)">{{item.attrsText}}<i class="el-icon-arrow-down"></i></el-button>
                                            </el-popover>
                                        </div>
                                    </div>
                                    <div style="width:200px;text-align:center">
                                        ￥{{item.price}}
                                    </div>
                                    <div style="width:160px">
                                        <el-input-number size="small" v-model="item.count" @change="handleChange(item.count,item)" :min="1" :max="10" label="描述文字"></el-input-number>
                                    </div>
                                    <div style="width:160px;text-align:center">
                                        ￥{{item.price*item.count}}
                                    </div>
                                    <div style="width:120px;" class="del">
                                        <div>移入收藏夹</div>
                                        <div @click="onDel(item)">删除</div>
                                        <div>找相屎</div>
                                    </div>
                                </div>    
                            </div>
                            
                        </li>
                    </ul>
                </div>
                <!-- 购物车底部 -->
                <div class="CartBottom">
                    <div class="CartLeft">
                        <p><el-checkbox @change="Selecteds(select)" v-model="select">全选</el-checkbox></p>
                        <div>删除商品</div>
                        <div>移入收藏夹</div>
                        <div>清空失效商品</div>
                    </div>
                    <div class="CartRight">
                        <div>共{{sumCounts}}件商品，已选择{{Counts}}件，商品合计: <span style="color:red;font-size: 20px; font-weight: bold;">￥{{sumPrice}}</span></div>
                        <el-button type="primary">下单结算</el-button>
                    </div>
                </div>
                <!-- 猜你喜欢 -->
                <div class="YouList">
                    <YouList></YouList>
                </div>
            </div>    
        </div>
        <home-footer></home-footer>
    </div>
</template>

<script>
import HomeHeader from '@/common/HomeHeader.vue'
import HomeFooter from '@/common/HomeFooter.vue'
import YouList from './YouList.vue';
export default {
    components: { HomeHeader, HomeFooter, YouList },
    name:"ShopPing",
    data() {
        return {
            checked:true,
            listData:[],
            visible: false,
            amend:[],
            select:false,
            num:1,
            sumCounts:0,
            Counts:0,
            sumPrice:0
        }
    },
    async created(){
        let res = await this.$http.ShopPing();
        this.listData=res.data.result
        let select= this.listData.every((item=>{
            return item.selected==true
        }))
        this.select=select
        this.sum();
    } ,
    methods:{
        toDetail(id){
            this.$router.push({
                path:"/details",
                query:{
                    id
                }
            })
        },
        // 获取图片旁边的数据
        async Gain(id){
            this.amend=[]
            let res =await this.$http.ShopId(id);
            this.amend=res.data.result.specs;
            this.sum();
        },
        // 单选
        async Selected(item,selected,count){
            await this.$http.SelectedCount(item.skuId,selected,count)
            let ress = await this.$http.ShopPing();
            this.listData=ress.data.result
            let sel =this.listData.every(item=>{
                return item.selected==true
            })
            this.select=sel;
            this.sum();
        },
        // 全选
        async Selecteds(s){
            var item=this.listData;
            for(let i=0;i<this.listData.length;i++){
                await this.$http.SelectedCount(item[i].skuId,s,item[i].count)
            }
            let ress = await this.$http.ShopPing();
            this.listData=ress.data.result 
            this.sum();
        },
        imgs(item,a){
            console.log(item,a);
        },
        Mark(){

        },
        // 删除
        async onDel(item){
            let res =await this.$http.Delete({ids:item.skuId})
            console.log(res,item);
        },
        // 个数
        async handleChange(value,item){
            await this.$http.SelectedCount(item.skuId+"",item.selected,value)
            this.sum();
        },
        // 商品总数
        sum(){
            let sumCounts=0;
            let Counts=0;
            let sumPrice=0;
            this.listData.forEach(item=>{
                sumCounts+=item.count
                if(item.selected==true){
                    Counts+=item.count
                    sumPrice+=item.count*item.price
                }
            })
            this.sumCounts=sumCounts
            this.Counts=Counts
            this.sumPrice=sumPrice
        }
    }
}
</script>

<style lang="less" scoped>
    *{margin: 0;padding: 0;}
    li{list-style: none;}
    a{text-decoration: none;}
    .cart-content{
        width: 100%;
        background: #f5f5f5;
    }
    .content .cart .cartContent .boxsss{
        width: 1240px;
        height: 300px;
    }
    .content .cart .cartContent .el-empty{
        height: 300px;
    }
    .content{
        width: 1240px;
        margin:0 auto;
        padding-bottom:20px;
        .A{
            width: 100%;
            height: 1px;
        }
        .shopBread{
            margin: 25px 10px;
            width: 1220px;
            height: 21px;
            background: #f5f5f5;
            display: flex;
            align-items: center;
            .el-breadcrumb__inner.is-link{
                font-weight: 0;
                color: #606266;
            }
            .el-breadcrumb__inner{
                color: #333;
            }
        }
        .cart{
            width: 1240px;
            background:#fff;
            .cartHeader{
                display: flex;
                color: #666;
                font-size: 16px;
                border-bottom: 1px solid #f5f5f5;
                .checkH{
                    padding:10px 10px  10px 30px;
                    text-align: left;
                }
                div{
                    padding: 10px;
                    height: 50px;
                    line-height: 50px;
                    text-align: center;
                }
            }
            .cartContent{
                display: flex;
                color: #666;
                border-bottom: 1px solid #f5f5f5;
                .checkH{
                    padding:10px 10px 10px 30px;
                    text-align: left;
                }
                div{
                    padding: 10px;
                    height: 100px;
                    line-height: 100px;
                    text-align:left;
                }
                .del{
                    height: 100px;
                    line-height: 0px;
                    padding: 10px;
                    div{
                        margin-top: 10px;
                        line-height:20px;
                        padding: 0px;
                        height: 20px;
                        text-align: center;
                    }
                }
                .boxImg{
                    display: flex;
                    img{
                        width: 100px;
                        height: 100px;
                    }
                    .boxPXuan{
                        line-height: 35px;
                        .names{
                            width: 270px;
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }
                        
                    }
                }
            }
        }
        .CartBottom{
            width: 1180px;
            height: 80px;
            background: #fff;
            padding: 0 30px;
            margin-top: 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .CartLeft{
                display: flex;
                height: 50px;
                line-height: 50px;
                div{
                    margin-left: 20px;
                    font-size: 14px;
                }
            }
            .CartRight{
                display: flex;
                height: 50px;
                line-height: 50px;
                .el-button{
                    margin-left: 20px;
                    padding: 0 50px;
                }
            }
        }
        .YouList{
            width: 1240px;
            height: 460px;
            background: #fff;
            margin-top: 20px;
        }
    }  
    .amendBox{
        padding: 10px;
        display: flex;
        .sam{
            width: 80%;
            display: flex;
            flex-wrap: wrap;
            margin-left:15px;
            .amendbox{
                border: 1px solid #333;
                margin: 3px 10px;
            }
            .borders{
                border: 1px solid red;
            }
            div{
                padding: 3px 5px;
                text-align: center;
            }
        }
    } 
    .el-input-number{
        height: 32px;
        line-height: 32px;
    }
    ::v-deep .el-input-number__increase{
        line-height: 32px;
        top: 44px;
        right: 11px;
    }
    ::v-deep .el-input-number__decrease{
        line-height: 32px;
        top: 44px;
        left: 11px
    }
    .amendImg{
        width: 34px;
        height: 34px;
    }
    ::v-deep element.style{
        left: 393px;
    }
</style>